<template>
  <div id="callus">
    <!--    背景图-->
    <div class="service-bg">
      <img src="http://competition.duoyu021.top/index/callusbg.png" alt="背景">
    </div>

    <!--    联系我们-->
    <div class="callusbox">
      <div class="callus">
        <div class="hotstit">
          <div class="tit-eng">CONTACT US</div>
          <div class="tit-p">联系我们</div>
        </div>

        <div class="callform">
          <div class="callleft">
            <div class="ltitbox">
              <div class="ltit">联系我们</div>
              <div class="ltiteng">contact us</div>
            </div>
            <div class="ltextbox" v-for="(item, i) in ltextlist" :key="i">
              <img :src="item.url" alt="地址">
              <div class="ltext">{{ item.tit }}</div>
            </div>
          </div>
          <div class="callright">
            <div class="ltitbox">
              <div class="ltit">在线留言</div>
              <div class="ltiteng">online message</div>
            </div>
            <div class="mform">
              <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" :size="formSize">
                <el-form-item label="姓名" prop="name" class="mitem">
                  <el-input v-model="ruleForm.name" />
                </el-form-item>

                <el-form-item label="邮箱" prop="email" class="mitem">
                  <el-input v-model="ruleForm.email" />
                </el-form-item>

                <el-form-item label="电话" prop="phone" class="mitem">
                  <el-input v-model="ruleForm.phone" />
                </el-form-item>

                <el-form-item label="内容" prop="content" class="mitem">
                  <el-input v-model="ruleForm.content" type="textarea" placeholder="请输入留言内容..." :rows="6" />
                </el-form-item>

                <el-form-item>
                  <el-button class="msubmit" @click="submitForm(ruleFormRef)">
                    提交留言
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>

        <div class="mapbox" ref="animatebox">
          <div id="map"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

useHead({
  title: '联系我们',
})

const ltextlist = ref([{
  url: 'http://competition.duoyu021.top/index/sadd.png',
  tit: '名称:山东LY有限公司'
}, {
  url: 'http://competition.duoyu021.top/index/sphone.png',
  tit: '电话：1234567890'
}, {
  url: 'http://competition.duoyu021.top/index/semail.png',
  tit: '邮箱:123456@qq.com'
}, {
  url: 'http://competition.duoyu021.top/index/sgroup.png',
  tit: '地址:山东省泰安市岱岳区'
},])

const ruleFormRef = ref()
const formSize = ref('large')

const ruleForm = ref({
  name: '',
  email: '',
  phone: '',
  content: ''
})

const rules = ref({
  name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' },
  { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },],
  email: [{
    required: true, message: 'Please input Activity email', trigger: 'blur'
  },
  ],
  phone: [{
    required: true, message: 'Please input Activity phone', trigger: 'blur'
  },
  ],
  content: [{
    required: true, message: 'Please input Activity content', trigger: 'blur'
  },
  ],
})

const submitForm = () => {
  // 首先，验证表单数据是否有效
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      // 表单数据有效，可以进行提交操作
      // 在这里编写提交表单的逻辑代码
      // 您可以使用 ruleForm.value 来访问表单数据

      // 例如，您可以将表单数据打印到控制台
      const { data: datacontactUs } = await useAsyncData(() => {
        return postMessage({ name: ruleForm.value.name, email: ruleForm.value.email, mobile: ruleForm.value.phone, content: ruleForm.value.content, });
      }, {
        default: () => ({})
      })
      console.log(datacontactUs.value.data.data);
      // console.log(ruleForm.value);

      // 或者您可以发送表单数据到后端服务器
      // 使用 axios 或其他 HTTP 请求库发送 POST 请求
      // 例如：
      // axios.post('/api/submit', ruleForm.value)
      //   .then(response => {
      //     // 处理成功响应
      //   })
      //   .catch(error => {
      //     // 处理错误响应
      //   });
    } else {
      // 表单数据无效，进行相应的错误处理
      console.log('表单数据无效');
    }
  });
}

const animatebox = ref()
let observer = null

onMounted(() => {
  // 地图
  const map = new AMap.Map('map', {
    center: [116.397428, 39.90923],
    zoom: 13
  })
  // 地图动画
  observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      animatebox.value.classList.add('animate__animated', 'animate__zoomInDown')
    } else {
      animatebox.value.classList.remove('animate__animated', 'animate__zoomInDown')
    }
  })
  observer.observe(animatebox.value)
})

onUnmounted(() => {
  observer.disconnect()
})


//获取联系方式
const { data: datacallus } = await useAsyncData(() => {
  return getContactList({});
}, {
  default: () => ({})
})
// console.log(datacallus.value.data.data);
ltextlist.value[0].tit = datacallus.value.data.data.name
ltextlist.value[1].tit = datacallus.value.data.data.phone
ltextlist.value[2].tit = datacallus.value.data.data.email
ltextlist.value[3].tit = datacallus.value.data.data.address
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

//背景图
.service-bg {
  width: 100%;
  height: 100%;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

//联系我们
.callusbox {
  width: 100%;
}

.callus {
  width: 66%;
  margin: auto;
}

.hotstit {
  display: block;
  position: relative;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}


.tit-eng {
  font-size: 2rem;
  color: #e4e4e4;
  font-weight: bold;
  transition: text-shadow 0.3s ease-in-out;
}

.tit-p {
  color: #0b6cfe;
  font-weight: bold;
  font-size: 2rem;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: text-shadow 0.3s ease-in-out;
}

.tit-eng:hover {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5)
}

.tit-p:hover {
  text-shadow: 2px 2px 4px rgba(11, 108, 254, 0.5);
}

.callform {
  width: 100%;
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
}

.callleft {
  width: 50%;
}

.ltitbox {
  display: flex;
  align-items: flex-end;
  margin-bottom: 30px;
}

.ltit {
  font-size: 26px;
  margin-right: 15px;
}

.ltiteng {
  color: #565656;
}

.ltextbox {
  display: flex;
  align-items: center;
  margin-bottom: 40px;

  & img {
    width: 20px;
    margin-right: 15px;
  }
}

.ltext {
  color: #565656;
}

.callright {
  width: 50%;
}

.mitem {
  width: 400px;
  margin-bottom: 20px;
}

.msubmit {
  width: 260px;
  margin-left: 50px;
  background-color: #f7ab73;
  color: white;
  transition: background-position 0.3s ease-in-out;
  /* 添加过渡效果 */
  background-size: 200% 100%;
  background-image: linear-gradient(to right, #f7ab73 50%, #3498db 50%);
}

.msubmit:hover {
  background-position: -100% 0;
}

.mapbox {
  width: 100%;
  margin-top: 40px;
  height: 400px;
}

#map {
  width: 100%;
  height: 100%;
}


/*
响应1500px
*/

@media screen and (max-width:1500px) {
  .callus {
    width: 80%;
  }
}

/*
响应1200px
*/

@media screen and (max-width:1200px) {
  .callus {
    width: 90%;
  }

  .mitem {
    width: 300px;
  }
}

/*
响应768px
*/

@media screen and (max-width:768px) {
  .service-bg {
    width: 100%;
    height: 200px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .tit-eng {
    font-size: 24px;
  }

  .tit-p {
    font-size: 24px;
  }

  .callform {
    flex-direction: column;
  }

  .callleft {
    width: 100%;
  }

  .callright {
    width: 100%;
  }

  .mitem {
    width: 100%;
  }

  .msubmit {
    width: 50%;
    margin: auto;
  }

  .mapbox {
    height: 200px;
  }

}
</style>
